<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/top.jsp" %>
<link rel="stylesheet" href="css/shop.css">
<style>
    @font-face {
        font-family: 'huayuan';
        src: url("font/花园肉丸.ttf");
    }

    @font-face {
        font-family: 'cm';
        src: url("font/Begilas.otf");
    }


    .display {
        max-height: 600px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /*.rg{*/
    /*    background-color:transparent;*/
    /*    border: solid 2px black;*/
    /*    border-radius: 5px;*/
    /*    position: relative;*/
    /*    left: 380px;*/
    /*    top: 10px;*/

    /*}*/

    input {
        height: 25px;
        margin-bottom: 5px;
    }

    td {
        border: none;
    }

    select {
        width: 90px;
        height: 30px;
    }

    #draw-border {
        position: relative;
        left: 180px;
    }

    #BackLink{
        top: 13px;
        width: 0;
    }

    #BackLink button{
        margin-left: 0;
    }

</style>


<div class="display">
    <div id="Catalog">
        <form action="register" method="post">

            <h3>User Information</h3>

            <table>
                <tr>
                    <td>User ID:</td>
                    <td><input type="text" name="username" id="username"/></td>
                    <td>
                        <div id="isExistInfo" style="font-family: huayuan;color: indianred;position: relative;bottom: 4px;"></div>
                    </td>
                <tr>
                    <td>New password:</td>
                    <td><input type="password" name="password" id="password"/></td>
                    <td>
                        <div id="isPwd" style="font-family: huayuan;color: indianred;position: relative;bottom: 4px;"></div>
                    </td>
                </tr>
                <tr>
                    <td>Repeat password:</td>
                    <td><input type="password" name="repeatPassword" id="repeatPassword"/></td>
                    <td>
                        <div id="isRePwd" style="font-family: huayuan;color: indianred;position: relative;bottom: 4px;"></div>
                    </td>
                </tr>
                <tr>
                    <td>VerificationCode:</td>
                    <td><input type="text" name="verificationCode"/></td>
                    <td><img id="img" src="verify" alt=""></td>
                </tr>
                <tr><font color='red'>${sessionScope.message2}</font></tr>
                <tr><font color='red'>${sessionScope.message1}</font></tr>
            </table>

            <%@ include file="accountFields.jsp" %>


            <div id="BackLink" style="float: left">
                <a href="signOnForm">
                    <button >login</button>
                </a>
            </div>
            <div id="draw-border">
                <button type="submit">register</button>
            </div>
            <%--        <input type="submit" name="newAccount" value="register" class="rg"/>--%>
        </form>
    </div>
</div>

<script src="jQuery.min.js"></script>
<script>
    //判断用户名是否重复
    $(function () {
        $('#username').on('blur', function () {
            var username = $(this).val();

            if (username !== "") {
                $.ajax({
                    type: "GET", url: "checkUserNameServlet", data: "name=" + username, success: function (data) {
                        if (data === "false") {
                            $("#isExistInfo").html("用户名已存在");
                        } else {
                            $("#isExistInfo").html("<img src='img/true.png' style='height: 16px;position: relative;right: 70px;'>");
                        }
                    }
                });
            }
            else {
                $("#isExistInfo").html("用户名不可为空");
            }
        })
    })

    // 判断密码输入是否一致

    $(function () {
        $('#password').on('blur',function () {
            var pwd1 = $('#password').val();
            var pwd2 = $(this).val();
            console.log(pwd1.length);
            if(pwd1.length===0){
                $("#isPwd").html("密码不能为空");
            }else{
                $("#isPwd").html("");
            }
        })

        $('#repeatPassword').on('blur', function () {
            var pwd1 = $('#password').val();
            var pwd2 = $(this).val();
            console.log(pwd1.length);
            if(pwd2===''||pwd2===null){
                $("#isRePwd").html("密码不能为空");
            }
            if(pwd1!==" " && pwd2!==" " && pwd1.length>0){
                if(pwd1!=pwd2){
                    $('#isRePwd').html("两次输入密码不一致");
                }
                else {
                    $("#isRePwd").html("<img src='img/true.png' style='height: 16px;position: relative;right: 70px;'>");
                    $("#isPwd").html("<img src='img/true.png' style='height: 16px;position: relative;right: 70px;'>");
                }
            }

        })
    })
</script>

